<template>
 <div>
 <div align="center">
    <form name="form1" action="" method="" target="">
      <div style="display:none;">&nbsp;</div>
      <table class="content_report" border="0" cellpadding="0" cellspacing="0">
        <thead>
          <tr>
            <td align="center">
              <br>
              <table width="100%" border="0" cellpadding="0" cellspacing="0">
                <tbody>
                  <tr>
                    <td width="160" class="reportSmallNormal">&nbsp;</td>
                    <td align="center" style="font-family:Arial;font-size:12pt;font-weight:bold;">
                      <div>產品銷售排行報表</div>
                    </td>
                    <td width="200" class="reportSmallNormal" align="right">
                      <div>列印日期: {{ time }}</div>
                    </td>
                  </tr>
                </tbody>
              </table>
              <br>
            </td>
          </tr>
          <tr>
            <td align="center">
              <table border="0" cellpadding="2" cellspacing="0">
                <tbody>
                  <tr>
                    <td class="reportSmallNormal" align="left" valign="top">分校:</td>
                    <td class="reportSmallNormal" align="left" valign="top">
                      {{ obj.school_name ? obj.school_name : '所有'}}
                    </td>
                    <td class="reportSmallNormal" align="left" valign="top">產品狀態:</td>
                    <td class="reportSmallNormal" align="left" valign="top">
                      {{ obj.status== '1' ? '發售中' : obj.status== '-1'
                       ? '停售' :'所有'
                      }}
                    </td>
                  </tr>
                </tbody>
              </table>
              <br>
            </td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td align="center">
              <table width="610" border="0" cellpadding="2" cellspacing="0" >
                <colgroup>
                  <col width="100"><!-- 學生編號 -->
                  <col width="100"><!-- 學生名稱 -->
                  <col width="100"><!-- 首次消費金額 -->
                  <col width="100"><!-- 再次消費金額 -->
                  <col width="100"><!-- 再次消費金額 -->
                </colgroup>
                <thead>
                  <tr>
                    <td class="reportSmallNormal" align="left" style="border-bottom:1px solid Black;">排名</td>
                    <td class="reportSmallNormal" align="left" style="border-bottom:1px solid Black;">產品編號</td>
                    <td class="reportSmallNormal" align="left" style="border-bottom:1px solid Black;">產品名稱</td>
                    <td class="reportSmallNormal" align="left" style="border-bottom:1px solid Black;">產品銷量 </td>
                    <td class="reportSmallNormal" align="left" style="border-bottom:1px solid Black;">銷售金額</td>
                  </tr>
                </thead>
                <tbody v-for="(item, index) in list" :key="index">
                  <tr>
                    <td class="reportSmallNormal" align="left" valign="top">{{index+1}}</td>
                    <td class="reportSmallNormal" align="left" valign="top">{{item.number}}</td>
                    <td class="reportSmallNormal" align="left" valign="top">{{item.name}}</td>
                    <td class="reportSmallNormal" align="left" valign="top">{{item.num}}</td>
                    <td class="reportSmallNormal" align="left" valign="top">{{item.price}}</td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
          <tr>
            <td align="center">
              <br>
              <span class="reportSmallNormal">*** 報表完 ***</span>
            </td>
          </tr>
          <tr>
            <td align="center">&nbsp;</td>
          </tr>
  
        </tbody>
      </table>
    </form>
  </div>
 </div>
</template>

<script setup>
import {ref,reactive,onMounted} from 'vue'
import {getTime} from '@/common/function.js'
const time = ref('')


const props = defineProps({
    list:Object,
    obj:Object,
    num:[String,Number]
})
const tableData = ref([])
const obj = ref([])
// const num = ref('')
tableData.value = props.list
obj.value = props.obj
// num.value = props.num

console.log(props.obj);
onMounted(() => {
    time.value = `${getTime().nowDate} ${getTime().nowTime}`
})
</script>

<style scoped lang='less'>
thead {
  display: table-header-group;
}

tfoot {
  display: table-footer-group;
}

.reportSmallBoldNormal {
  font-family: Arial;
  font-size: 8pt;
  font-weight: bold;
}

.reportSmallNormal {
  font-family: Arial;
  font-size: 8pt;
}
</style>